<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

// 菜单选中
const handleSelect = (key: string, keyPath: string[]) => {
    router.push('/smartClinic?department=' + key)
}
</script>

<template>
    <el-menu default-active="3" @select="handleSelect">
        <el-menu-item index="3">
            <span>全部</span>
        </el-menu-item>
        <el-menu-item index="0">
            <span>内科</span>
        </el-menu-item>
        <el-menu-item index="1">
            <span>外科</span>
        </el-menu-item>
        <el-menu-item index="2">
            <span>儿科</span>
        </el-menu-item>
    </el-menu>
</template>

<style scoped lang="scss">
.el-menu {
    width: 10vw;
    border-right: none;

    .el-menu-item {
        display: flex;
        justify-content: start;
        height: 8vh;
        font-size: 1vw;
        border-bottom: 0.2vw solid #fff;
        background: #eee;
        padding: 1.5vw !important;

        span {

            margin: 0;
            padding: 0;
        }
    }

    .is-active {
        color: #fff;
        background-color: #545c64;
    }

    .el-menu-item:hover {
        color: #fff;
        background-color: #545c64;
    }
}
</style>